<template>
  <div :class="'topic-item-wrapper ' + (props.item?.isActive ? ' active' : '')" @click="selectItem">
    <div class="topic-title"><el-icon><paper-icon></paper-icon></el-icon>
      {{ props.item?.title }}</div>
    <div class="topic-answer-short">
      {{props.item?.message?.length > 50 ? (props.item?.message.substr(0, 50) + '...') : props.item?.message}}
    </div>
  </div>
</template>

<script setup lang="ts">
import PaperIcon from "@/components/icons/paperIcon.vue";
const emit = defineEmits(['selectedItem']);
const props = defineProps({
  item: Object
});
const selectItem = () => {
  emit('selectedItem', props.item);
}
</script>

<style lang="less" scoped>
.topic-item-wrapper {
  cursor: pointer;
  padding: 10px 8px 10px 24px;
  .topic-title {
    font-weight: 0;
    font-size: 16px;
    color: #36444E;
    letter-spacing: 0;
    .el-icon{
      margin-right: 12px;
    }
  }
  .topic-answer-short {
    font-size: 12px;
    color: #798086;
    letter-spacing: 0;
    line-height: 24px;
  }
}
.topic-item-wrapper.active {
  background: #eff7ff;
}
</style>